fix(admin): keep the Regenerate-Secret button reachable in the client modal#110
Merged
Merged
Conversation
… modal The OAuth-client modal's left "General" column is an independent scroll region (`.col-identity`, a flex column). Two layout bugs hid the Regenerate-Secret button — its last child — at a real (100%) zoom: 1. `.two-col` is a CSS grid with no explicit rows track, so the single implicit row was `auto` and sized to the taller (right) column's content, overgrowing the modal body. The left column then never scrolled and its bottom slid under the sticky footer. Fixed with `grid-template-rows: minmax(0, 1fr)` so each column scrolls within the modal height. 2. As a flex column, an overflowing `.col-identity` shrinks its most shrinkable child to fit. The button (`overflow:hidden` → 0 min-height) was that child, so it collapsed to `height:0` and vanished — only reappearing when zoomed out far enough to stop the overflow. Fixed by pinning the column's children to `flex-shrink: 0` so the column scrolls instead of crushing them. Verified live: the button now renders at full height, is reachable by scrolling the column, and sits above the footer. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
In the OAuth-client modal, the Regenerate Secret button (bottom of the left
"General" column) was hidden at a real 100% zoom — you couldn't scroll to it, and
it only reappeared when zooming the browser out. Reported by an operator setting
up a live instance.
Root cause — two stacked layout bugs in
.col-identityThe left column is an independent scroll region (a flex column inside a CSS-grid
.two-col):.two-colhadgrid-template-columnsbut no rowstrack, so the single implicit row was
autoand sized to the taller (right)column's content — overgrowing the modal body. The left column then never
scrolled and its bottom slid under the sticky footer.
.col-identityshrinks its most-shrinkable child. The button (
overflow:hidden→ 0min-height) was that child, so it collapsed to
height:0and vanished —reappearing only when zoomed out far enough to stop the overflow.
Fix (CSS only,
ClientDetails.vue).two-col { grid-template-rows: minmax(0, 1fr); }— bind the row so eachcolumn scrolls within the modal height.
.col-identity > * { flex-shrink: 0; }— a scroll container's children keeptheir natural height instead of being crushed.
padding-bottomso the last control clears the scroll edge.Verification
chrome-devtools, live: the button now renders at full height (32px), is reachable
by scrolling the column, and sits above the footer (measured + screenshot).
pnpm type-check+pnpm buildgreen. Localised to the client modal — otheradmin modals use a different (tabbed) scroll pattern.
🤖 Generated with Claude Code